<template>
  <div class="business">
    <div class="business-head">
      <div class="shop">
        <div class="shop-info">
          <h3>{{ info.name }}</h3>
          <p>
            <van-rate v-model="info.score" readonly />
            <span>(661)</span>
            <span>月售{{ info.sellCount }}单</span>
          </p>
        </div>
        <p>
          <span>已收藏</span>
        </p>
      </div>
      <van-divider />
      <div class="sendInfo">
        <p>
          <span>起送价</span>
          <span
            ><span class="num">{{ info.minPrice }}</span
            >元</span
          >
        </p>
        <p>
          <span>商家配送</span>
          <span
            ><span class="num">{{ info.deliveryPrice }}</span
            >元</span
          >
        </p>
        <p>
          <span>平均配送时间</span>
          <span
            ><span class="num">{{ info.deliveryTime }}</span
            >分钟</span
          >
        </p>
      </div>
    </div>
    <div class="business-cont">
      <div>
        <h3>活动与公告</h3>
        <p class="text">
          {{ info.bulletin }}
        </p>
      </div>
      <van-divider />
      <div>
        <p v-for="(item, index) in info.supports" :key="index">{{ item }}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

interface shopData {
  avatar?: string; //头像
  bulletin?: string; //公告
  date?: Array<string>; //营业时间
  deliveryPrice?: number; //配送费
  deliveryTime?: number; //配送时间
  description?: string; //描述
  id?: number; //ID号
  minPrice?: number; //起送费
  name?: string; //店名
  pics?: Array<string>; //店铺图片
  score?: number; //评分
  sellCount?: number; //销量
  supports: Array<string>; //活动
}
@Component
export default class extends Vue {
  info: shopData = { supports: [] };
  created() {
    let obj = localStorage.getItem("shopInfo");
    if (obj) {
      this.info = JSON.parse(obj);
    }
  } /*  */
}
</script>

<style lang="scss" scoped>
.business {
  background: #f4f5f7;
  .business-head {
    background: #fff;
    padding: 20px;
    .shop {
      display: flex;
      justify-content: space-between;
      .shop-info {
        p {
          line-height: 45px;
          font-size: 14px;
          color: #d5d5d5;
        }
      }
    }
    .sendInfo {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #adadad;
      p {
        display: flex;
        flex-direction: column;
        text-align: center;
        span:last-child {
          margin-top: 10px;
        }
        .num {
          font-size: 18px;
          color: #000;
        }
      }
    }
  }
  .business-cont {
    background: #fff;
    margin-top: 20px;
    padding: 20px 10px;
    .text {
      letter-spacing: 2px;
      line-height: 24px;
      color: #e67e62;
      margin-top: 20px;
      font-size: 14px;
      font-weight: bold;
    }
  }
}
</style>